﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model IQueryable<YTCMS.Domain.Entities.category>
@using YTCMS.Core;
<link href="/Content/ytcms/css/Scenery.css" rel="stylesheet" />
<!-------景点介绍--------->
<div class="jumbotron main">
    <div class="container wrapper">
        <img src="/Content/ytcms/img/map.png" />
        <div class="destination_btn">
            <a href="javascript:;" class="north_al" >
                <span class="c_name">阿里地区</span>
            </a>
            <a href="javascript:;" class="south_rkz" >
                <span class="c_name">日喀则</span>
            </a>
            <a href="javascript:;" class="nqdq">
                <span class="c_name">那曲地区</span>
            </a>
            <a href="javascript:;" class="ls">
                <span class="c_name">拉萨</span>
            </a>
            <a href="javascript:;" class="sn">
                <span class="c_name">山南地区</span>
            </a>
            <a href="javascript:;" class="lz">
                <span class="c_name">林芝地区</span>
            </a>
            <a href="javascript:;" class="cd">
                <span class="c_name">昌都地区</span>
            </a>
        </div>
        <div class="hot_city">
            @Html.Action("Index", "Ads", new { code = "HotCity"})
        </div>

        <div class="select_box_country" >
            <a href="javascript:;" class="close_box_btn" id="close_box_btn"></a>
            <ul class="select_box_country_main" id="north_al_box">
                <li>
                    <span class="city_name">
                        @*<a href="" title="纽约">纽约</a>
                        <a href="" title="洛杉矶 ">洛杉矶 </a>
                        <a href="" title="旧金山 ">旧金山 </a>
                        <a href="" title="圣地亚哥">圣地亚哥</a>
                        <a href="" title="特立尼达拉">特立尼达拉</a>
                        <a href="" title="纽约">纽约</a>
                        <a href="" title="洛杉矶 ">洛杉矶 </a>
                        <a href="" title="旧金山 ">旧金山 </a>
                        <a href="" title="圣地亚哥">圣地亚哥</a>
                        <a href="" title="特立尼达拉">特立尼达拉</a>*@
                        @{
                            var aldq = Model.First(s => s.Id == 1);
                            if (aldq != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == aldq.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }
        
                    </span>
                </li>
            </ul>
            <ul class="select_box_country_main" id="south_rkz_box">
                <li>
                    @*<a href="">
                        <b class="country_name" title="美国">美国</b>
                    </a>
                    <span class="city_name">
                        <a href="" title="纽约">纽约</a>
                        <a href="" title="洛杉矶 ">洛杉矶 </a>
                        <a href="" title="旧金山 ">旧金山 </a>
                        <a href="" title="圣地亚哥">圣地亚哥</a>
                        <a href="" title="特立尼达拉">特立尼达拉</a>
                    </span>*@
                    <span class="city_name">
                        @{
                            var rkz = Model.First(s => s.Id == 3);
                            if (rkz != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == rkz.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }
                    </span>
                </li>
               
            </ul>
            <ul class="select_box_country_main" id="nqdq_box">
                <li>
                    <span class="city_name">
                        @{
                            var nq = Model.First(s => s.Id == 2);
                            if (nq != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == nq.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }
                    </span>
                </li>
            </ul>
            <ul class="select_box_country_main" id="ls_box">
                <li>
                    <span class="city_name">
                        @{
                            var ls = Model.First(s => s.Id == 4);
                            if (ls != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == ls.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }


                    </span>
                </li>
            </ul>
            <ul class="select_box_country_main" id="sn_box">
                <li>
                    <span class="city_name">
                        @{
                            var sn = Model.First(s => s.Id == 5);
                            if (sn != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == sn.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }

                    </span>
                </li>
            </ul>
            <ul class="select_box_country_main" id="lz_box">
                <li>
                    <span class="city_name">
                        @{
                            var lz = Model.First(s => s.Id == 6);
                            if (lz != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == lz.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }
                        
                    </span>
                </li>
            </ul>
            <ul class="select_box_country_main" id="cd_box">
                <li>
                    <span class="city_name">
                        @{
                            var cd = Model.First(s => s.Id == 7);
                            if (cd != null)
                            {
                                foreach (var item2 in Model.Where(s => s.Pid == cd.Id))
                                {
                                    <a href="" title="@item2.Name">@item2.Name </a>
                                }
                            }
                        }

                    </span>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script>
    $(function () {
        $('.destination_btn a').click(function (e) {
            var that = this;
            if (that.offsetTop == 85 || that.offsetTop == 100) {
                close_target_list();
            } else {
                show_target_list(that);
            }
        })
        $('.close_box_btn').click(function () {
            close_target_list();
        })
    })
   
    var btn_m_time = 400;
    var start_coordinate;
    var click_dom;
    var canclick = true;
    var c_times = 0;
    function show_target_list(obj) {
        if (canclick) {
            canclick = false;
            start_coordinate = obj.offsetLeft + "," + obj.offsetTop;
            var coordinate;
            click_dom = obj.className;
            if (obj.className == "north_al" ) {
                coordinate = "435,85";
            } else {
                coordinate = "450,100";
            }
            emile(obj, "left:" + coordinate.split(',')[0] + "px;top:" + coordinate.split(',')[1] + "px", { duration: btn_m_time });
            if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
                $('.destination_btn a').hide();
                obj.style.display = "block";
            } else {
                var _des_link = $('.destination_btn a');
                for (var i = 0; i < _des_link.length; i++) {
                    if (_des_link[i].className != obj.className) {
                        emile(_des_link[i], "opacity:0;", {
                            duration: btn_m_time, after: function () {
                                _des_link.hide();
                                obj.style.display = "block";
                            }
                        });
                    }
                }
            }
            $('.select_box_country').show();
            $('.select_box_country_main').hide();
            document.getElementById(obj.className + "_box").style.display = "block";
            var box_dom = $('.select_box_country')[0];
            emile(box_dom, "opacity:1;", { duration: btn_m_time });
            if (c_times == 0) {
                box_dom.style.marginLeft = -(box_dom.clientWidth / 2) - 100 + "px";
                c_times = 1;
            }
            box_dom.style.marginLeft = -(box_dom.clientWidth / 2)-100 + "px";

        }
    }
    function close_target_list() {
        if (!canclick) {
            var _box = $('.select_box_country'), _box_main = $('.select_box_country_main'), _des_link = $('.destination_btn a');
            if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
                _box.hide();
                _box_main.hide();
            } else {
                emile(_box[0], "opacity:0;", {
                    duration: btn_m_time, after: function () {
                        _box.hide();
                        _box_main.hide();

                    }
                });
            }
            canclick = true;
            emile($("." + click_dom)[0], "left:" + start_coordinate.split(',')[0] + "px;top:" + start_coordinate.split(',')[1] + "px", { duration: btn_m_time });
            for (var i = 0; i < _des_link.length; i++) {
                if (_des_link[i].className != click_dom) {
                    _des_link.show();
                    emile(_des_link[i], "opacity:1;", { duration: btn_m_time });
                }
            }
        }
    }
    /************************************
    动画emile
    *************************************/
    (function (f, a) {
        var h = document.createElement("div"),
        g = ("backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing zIndex").split(" ");
        function e(j, k, l) {
            return (j + (k - j) * l).toFixed(3)
        }
        function i(k, j, l) {
            return k.substr(j, l || 1)
        }
        function c(l, p, s) {
            var n = 2,
            m, q, o, t = [],
            k = [];
            while (m = 3, q = arguments[n - 1], n--) {
                if (i(q, 0) == "r") {
                    q = q.match(/\d+/g);
                    while (m--) {
                        t.push(~~q[m])
                    }
                } else {
                    if (q.length == 4) {
                        q = "#" + i(q, 1) + i(q, 1) + i(q, 2) + i(q, 2) + i(q, 3) + i(q, 3)
                    }
                    while (m--) {
                        t.push(parseInt(i(q, 1 + m * 2, 2), 16))
                    }
                }
            }
            while (m--) {
                o = ~~(t[m + 3] + (t[m] - t[m + 3]) * s);
                k.push(o < 0 ? 0 : o > 255 ? 255 : o)
            }
            return "rgb(" + k.join(",") + ")"
        }
        function b(l) {
            var k = parseFloat(l),
            j = l.replace(/^[\-\d\.]+/, "");
            return isNaN(k) ? {
                v: j,
                f: c,
                u: ""
            } : {
                v: k,
                f: e,
                u: j
            }
        }
        function d(m) {
            var l, n = {},
            k = g.length,
            j;
            h.innerHTML = '<div style="' + m + '"></div>';
            l = h.childNodes[0].style;
            while (k--) {
                if (j = l[g[k]]) {
                    n[g[k]] = b(j)
                }
            }
            return n
        }
        a[f] = function (p, m, j) {
            
            p = typeof p == "string" ? document.getElementById(p) : p;
            j = j || {};
            var r = d(m),
            q = p.currentStyle ? p.currentStyle : getComputedStyle(p, null),
            l,
            s = {},
            n = +new Date,
            k = j.duration || 200,
            u = n + k,
            o,
            t = j.easing ||
            function (v) {
                return (-Math.cos(v * Math.PI) / 2) + 0.5
            };
            for (l in r) {
                s[l] = b(q[l])
            }
            o = setInterval(function () {
                var v = +new Date,
                w = v > u ? 1 : (v - n) / k;
                for (l in r) {
                    p.style[l] = r[l].f(s[l].v, r[l].v, t(w)) + r[l].u
                }
                if (v > u) {
                    clearInterval(o);
                    j.after && j.after()
                }
            },
            10)
        }
    })("emile", this);

    
</script>